<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true"
             class="demo-form-inline">
      <!-- 所属分类 TODO -->
      <el-form-item label="课程分类">
        <el-select v-model="courseQuery.subjectParentId"
                   placeholder="一级分类"
                   @change="subjectLevelOneChanged">
          <el-option v-for="subject in subjectOneList"
                     :key="subject.id"
                     :label="subject.title"
                     :value="subject.id" />
        </el-select> <!-- 二级分类 -->
        <el-select v-model="courseQuery.subjectId"
                   placeholder="二级分类">
          <el-option v-for="subject in subjectTwoList"
                     :key="subject.id"
                     :label="subject.title"
                     :value="subject.id" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="courseQuery.status"
                   clearable
                   placeholder="课程状态">
          <el-option value="Normal"
                     label="已发布" />
          <el-option value="Draft"
                     label="未发布" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="courseQuery.teacherName"
                  placeholder="讲师姓名" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="courseQuery.title"
                  placeholder="课程名称" />
      </el-form-item>

      <el-form-item class="button">
        <el-button type="primary"
                   icon="el-icon-search"
                   @click="getList()">查询</el-button>
        <el-button type="default"
                   @click="resetData()">清空</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="list"
              border
              fit
              highlight-current-row>

      <el-table-column label="序号"
                       width="70"
                       align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <!-- <el-table-column prop="title"
                       label="课程名称"
                       width="80" /> -->

      <el-table-column label="课程信息"
                       width="470"
                       align="center">
        <template slot-scope="scope">
          <div class="info">
            <div class="pic">
              <img :src="scope.row.cover"
                   alt="scope.row.title">
              <p class="glass" />
            </div>
            <div class="title"> <a href="">{{ scope.row.title }}</a>
              <!-- <p>{{ scope.row.lessonNum }}课时</p> -->
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="课程状态"
                       width="80"
                       align="center">
        <template slot-scope="scope">
          {{ scope.row.status==='Normal'?'已发布':'未发布' }}
        </template>
      </el-table-column>

      <el-table-column prop="lessonNum"
                       label="课时数"
                       align="center" />

      <el-table-column prop="gmtCreate"
                       label="添加时间"
                       width="160" />

      <el-table-column prop="viewCount"
                       label="浏览数量"
                       width="60" />

      <el-table-column label="操作"
                       width="200"
                       align="center">
        <template slot-scope="scope">
          <router-link :to="'/course/info/'+scope.row.id">
            <el-button type="text"
                       class="edit"
                       size="mini"
                       icon="el-icon-edit">编辑课程基本信息</el-button>
          </router-link>
          <router-link :to="'/course/chapter/'+scope.row.id">
            <el-button type="text"
                       size="mini"
                       icon="el-icon-edit">编辑课程大纲信息</el-button>
          </router-link>
          <el-button type="danger"
                     size="mini"
                     icon="el-icon-delete"
                     @click="removeDataById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination :current-page.sync="page"
                   :page-sizes="[10, 20, 30, 40]"
                   :page-size="limit"
                   :total="total"
                   layout="sizes, prev, pager, next"
                   style="padding: 30px 0; text-align: center;"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" />

  </div>
</template>
<script>
// 引入调用teacher.js文件
import course from '@/api/edu/course'
import subject from '@/api/edu/subject'

export default {
  // 写核心代码位置
  // data:{
  // },
  data() { // 定义变量和初始值
    return {
      list: null, // 查询之后接口返回集合
      page: 1, // 当前页
      limit: 10, // 每页记录数
      total: 0, // 总记录数
      courseQuery: {}, // 条件封装对象
      subjectOneList: [], // 一级分类
      subjectTwoList: []// 二级分类
    }
  },
  created() { // 页面渲染之前执行，一般调用methods定义的方法
    // 调用
    this.getList()
    this.getOneSubject()
  },
  methods: {
    removeDataById(id){
      course.removeDataById(id).then(response=>{
        this.list=this.getList()
      })
    },
    subjectLevelOneChanged(value) {
      // value就是一级分类id值
      // 遍历所有的分类，包含一级和二级
      for (var i = 0; i < this.subjectOneList.length; i++) {
        // 每个一级分类
        var oneSubject = this.subjectOneList[i]
        // 判断：所有一级分类id 和 点击一级分类id是否一样
        if (value === oneSubject.id) {
          // 从一级分类获取里面所有的二级分类
          this.subjectTwoList = oneSubject.children
          // 把二级分类id值清空
          this.courseInfo.subjectId = ''
        }
      }
    },
    getOneSubject() {
      subject.getSubjectList().then(response => {
        this.subjectOneList = response.data.list
      })
    },
    // 创建具体的方法，调用teacher.js定义的方法
    // 讲师列表的方法
    getList(page = 1) {
      this.page = page
      course.getListCourse(this.page, this.limit, this.courseQuery)
        .then(response => { // 请求成功
          // response接口返回的数据
          this.list = response.data.rows
          this.total = response.data.total
        })
    },
    resetData() { // 清空的方法
      // 表单输入项数据清空
      this.courseQuery = {}
      // 查询所有讲师数据
      this.getList()
    },
    handleSizeChange(val) {
      this.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.getList(val)
    }

  }
}
</script>
<style scoped>
.info {
  width: 450px;
  overflow: hidden;
}
.info .pic {
  width: 150px;
  height: 80px;
  overflow: hidden;
  float: left;

  position: relative;
}
.info .pic a {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.info .pic img {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.info .title {
  width: 280px;
  float: right;
  height: 90px;
}
.info .title a {
  display: block;
  height: 48px;
  line-height: 48px;
  overflow: hidden;
  color: #00baf2;
}
.button {
  float: right;
  padding-right: 50px;
}
</style>
